<!-- 新建cai菜单 -->
<template>
  <div class="created_menu">

    <base-form  :key="componentKey" :formConfig="modalFormConfig" v-model="formaDataModel">
      <template #footer>
        <el-button type="primary" plain size="small" @click="handleUpdateMenuCb">确定修改</el-button>
      </template>
    </base-form>
  </div>
</template>
<script setup lang='ts' >
import { ref, watch ,watchEffect} from 'vue'
import { separateType } from "@/utils/menu-map"
import { getIconsSVGName } from "@/utils/menu-map"
const props = defineProps({
  modalFormConfig: {
    type: Object,
    required: true
  },
  defaultInfo: {
    type: Object,
    required: true
  },
  pageName: {
    type: String,
    required: true
  },
})

const emit = defineEmits(['updateMenuCb'])

const formaDataModelOrigin: any = {}
const formItems = props.modalFormConfig?.formItems ?? []
let icons = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'icon')
let menu_type = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'menu_type')
let component = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'component')
let is_cache = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'is_cache')
let path = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'path')
let perms = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'perms')
let remark = props.modalFormConfig.formItems.find((item: { field: string }) => item.field === 'remark')


icons.options = getIconsSVGName()
menu_type.otherOptions.disabled = true


for (const formItem of formItems) {
  formaDataModelOrigin[formItem.field] = ''
}
let formaDataModel = ref(formaDataModelOrigin)
watch(() => props.defaultInfo, (newVal: any) => {
  for (const item of formItems) {
    formaDataModel.value[`${item.field}`] = newVal[`${item.field}`]

  }
}, { immediate: true, deep: true })

const handleUpdateMenuCb = () => {
  let newValue = { ...formaDataModel.value, ["id"]: props.defaultInfo.id }
  newValue = separateType(newValue)
  emit('updateMenuCb', newValue)
}


// 关键点强制重现渲染组件
let componentKey = ref('1')




watchEffect(()=>{
 const selectType = formaDataModel.value.menu_type
  componentKey.value = selectType
  //1.如果是创建按鈕 去除 组件名称、路径、是否缓存、 图标
 if(selectType == 2){
    component.isHidden =true
    path.isHidden =true
    is_cache.isHidden =true
    icons.isHidden =true
    remark.isHidden = true
    perms.isHidden = false
 }
 //2.如果是创建二级级菜单 去除 图标、权限标识
 if(selectType == 1){
    perms.isHidden =true
    icons.isHidden =true
    remark.isHidden = true

     component.isHidden =false
    path.isHidden =false
    is_cache.isHidden =false
 }
//3.如果是创建一级级菜单 去除 路径、权限标识、是否缓存、组件
 if(selectType == 0){
   component.isHidden =true
    path.isHidden =true
    is_cache.isHidden =true
    perms.isHidden =true
   icons.isHidden =false
   remark.isHidden =false
 }

})
</script>
<style lang='less' scoped>
</style>
